.chat {
    height: 100%;
    position: relative;
    display: flex;

    @include respond(phone) {
        height: calc(100vh - 70px);
    }

    &__content {
        height: 100%;
        width: 100%;
        display: flex;
        flex-flow: column;
        background: rgba(24, 25, 28, 0.6);
        margin-left: 300px;
        overflow: hidden;
        transition: all 0.5s ease;

        @include respond(phone) {
            margin-left: 0px;
        }
    }

    &__header {
        text-align: left;
        padding: 1rem 0;
        margin: 0 1rem;
        display: flex;
        align-items: center;
        background: rgba($color: #18191c, $alpha: 0.8);
        border-bottom: 1px solid #ccc;
    }

    &__actions {
        flex-grow: 1;
        text-align: right;

        & > * {
            cursor: pointer;
        }
    }

    /** User List */

    /** User List Container */
    &__c-userlist {
        position: relative;
    }

    /** User List [UL]*/
    &__userlist {
        display: flex;
        flex-flow: column;
        margin: 0;
        padding: 1rem;
        list-style-type: none;
    }

    &__user {
        display: flex;
        width: 100%;
        margin: 1rem 0;
        transition: all 0.5s ease;

        &-item {
            display: flex;
            align-items: center;
            padding: 0 0.5rem;
            width: 100%;
        }

        &-image {
            height: 60px;
            width: 60px;
        }

        &-avatar {
            height: 60px;
            width: 60px;
            border-radius: 100%;
            border: 2px solid green;
        }

        &-details {
            display: flex;
            align-items: center;
            margin: 0 2rem;
            width: 80%;
            font-family: 'Russo One';
        }
    }

    /** Message List */
    &__c-messagelist {
        height: 100%;
        padding: 0;
        background: rgba($color: #18191c, $alpha: 0.8);
        overflow: hidden;

        @include respond(phone) {
            height: 100%;
            padding: 0;
        }
    }

    &__messages {
        margin: 0;
        list-style: none;
        padding: 0 1rem;
        overflow: auto;
        height: 100%;

        @include respond(phone) {
            height: 100%;
        }
    }

    &__message {
        margin: 2rem 0;
        transition: opacity 0.5s ease, transform 0.5s ease;

        &-item {
            display: flex;
        }

        &-details {
            margin: 0 1rem;
            display: flex;
            color: rgb(158, 158, 158);

            & span {
                margin: 0 5px;
            }
        }

        &-content {
            position: relative;
            background: #3c9adf;
            padding: 0.5rem;
            border-radius: 8px;
            text-align: left;
            margin: 0 1rem;
            align-self: center;
            font-family: 'Work Sans';
            white-space: pre-line;

            &--left::before {
                content: '';
                position: absolute;
                top: 50%;
                left: -6px;
                border-radius: 10px;
                border-color: transparent #3c9adf transparent transparent;
                border-width: 10px;
                border-style: solid;
                transform: translate(-50%, -50%);
            }

            &--right::before {
                content: '';
                position: absolute;
                top: 50%;
                bottom: 0px;
                right: -26px;
                border-radius: 10px;
                border-color: transparent transparent transparent #3c9adf;
                border-width: 10px;
                border-style: solid;
                transform: translate(-50%, -50%);
            }
        }
    }

    &__utyping {
        border-radius: 5px;
        padding: 0.5rem 0 0.5rem 1rem;
        margin: 10px 1rem;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        transition: all 0.5s ease;
        background: #101114;

        & > span {
            font-family: 'Work Sans';
            transition: all 0.5s ease;
        }
    }

    /** Input List */
    &__input {
        overflow: hidden;
        display: flex;
        padding: 1rem 0;
        margin: 0 1rem;
        border-top: 1px solid #fff;

        &-control {
            position: relative;
            padding: 1rem 0 1rem 0.5rem;
            font-family: 'Russo One';
            font-size: 0.9rem !important;
            width: 100%;
            resize: none;
            box-sizing: border-box;
        }
    }
}

.userlist {
    &__actions {
        width: 100%;
        display: flex;
        align-items: center;

        & div:last-child {
            flex-grow: 1;
            text-align: right;
        }

        @include respond(phone) {
        }
    }
}
